<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8">
    <meta name="viewport"  content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta charset="UTF-8">
    <title>组讯</title>
    <style>
        /* sunshine/actor/info.wxss */
        .info_title {
            height: 80px;
            margin: 20px 20px;
            color: #fff;
            font-size: 24px;
            border-radius: 8px;
            /* background: url("../../icon/info/bg_header.png") 100% no-repeat; */
        }

        .info_title_body {
            float: left;
            width: 49%;
            height: 100%;
            text-align: center;
            line-height: 36px;
        }

        .title_text_num {
            font-weight: bold;
            padding-right: 10px;
            font-size: 28px;
        }

        /* 组训  */

        info_role

        .info_body {
            padding: 2px 20px;
        }

        .info_role {
            height: 260px;
            background-color: #fff;
            padding: 16px;
            border-radius: 8px;
            margin: 20px;
        }

        .info_role image {
            float: left;
            width: 30%;
            height: 100%;
            border-radius: 8px;
        }

        /* d单个组训*/

        .info_titile {
            font-size: 20px;
            color: red;
            background: url("../info/mark.png") left 50% no-repeat;
            padding-left: 80px;
            margin: -20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .info_role_msg {
            line-height: 100px;
            color: red;
            margin-left: 200px;
            width: 61%;
            height: 100%;
            display:black;
        }
        .role-dd {
            display: table;
            line-height: 20px;
            /*padding: 10px 0;*/
            /* border:1px double red; */
            color: #666;
            font-size: 22px;
        }

        .role-dd::before {
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            float: left;
            margin-right: 16px;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"type="text/javascript"></script>

<div style="background-color: #C0C0C0;" scroll-y id="app-info">
    <div class="info_title">
        <div class="info_title_body info_title_info">
            <div class="info_title_text"><p class="title_text_num">063082</p>位</div>
            <div class="info_title_text"><text>入住的导演大咖</text></div>
        </div>
        <div class="info_title_body info_title_right">
            <div class="info_title_text"><p class="title_text_num">776</p>位</div>
            <div class="info_title_text"><p>可靠的角色信息</p></div>
        </div>
    </div>
    <div class="info_body" style="flex-direction:row;">
        <div class="info_role"  v-for="info in infos"   style="text-overflow : ellipsis;">
            <!-- <image class="info_role_img" src="../../icon/icon.png"></image> -->
            <image class="info_role_img" :src="info.pic" width="180" style="float:left;height:100%"></image>

            <div class="info_role_msg" style="">
                <div class="info_role_title role_font info_titile">{{info.title}}</div>
                <p class="role_font role-dd">导演：{{info.directorName}}</p>
                <p class="role_font role-dd">类型：{{info.type}}</p>
                <p class="role_font role-dd">招募角色：{{info.roleSize }}</p>
                <p class="role_font role-dd">开机时间：{{info.startTime | getParseDate}}</p>
            </div>
        </div>
    </div>

    <castingh>
        <span slot="red2">红色</span>
        <span slot="blue2">蓝色</span>
    </castingh>
    <anchored-heading :level="1" solt="cas">Hello world!</anchored-heading>
</div>
<div id="app">
    <button @click="toshow">点击让子组件显示</button>
    <children2 v-if="chi" id="asd">
        <span slot="first" @click="tobeknow">12345</span>
        <span slot="second">56789</span>
        <!--上面这行不会显示-->
    </children2>
</div>
<script>
    var vm2 = new Vue({
        el: '#app',
        methods: {
            tobeknow: function () {
                console.log("It is the parent's method");
            },
            toshow: function(){
                this.$children[0].tohidden= true;
            }
        },
        data:{
            chi:true,
            chia:true
        },
        components: {
            children2: {    //这个无返回值，不会继续派发
                template: "<button v-if='tohidden' @click='tohide' id='qw' width='122px' ><slot name='first'></slot>为了明确作用范围，" +
                "<slot name='second'></slot>所以使用button标签</button><slot name='second2'></slot>",
                data: function () {
                    return {
                        tohidden: true
                    }
                },
                methods: {
                    tohide: function () {
                        this.tohidden = !this.tohidden;
                    }
                }
            }
        }
    });
</script>

<script>
    var vm = new Vue({
        el:"#app-info",
//        template:"<div id='app-info2'>13216546</div>",
//        render: function (createElement) {
//            return createElement(
//                'h1',   // tag name 标签名称
//                {
//                    style:{
//                        color:'red',
//                    }
//
//                },
//               // this.$slots.default // 子组件中的阵列
//                [
//                    createElement('div',
//                        {
//                        style:{
//                            border:'1px solid red'
//                        }
//
//                    },
//                        '子级div标签')
//                ]
//
//            )
//        },
        components:{
            'anchored-heading':{
                render: function (createElement) {
                    return createElement(
                        'h' + this.level,   // tag name 标签名称
                        {
                            style: {
                                color: 'red',
                            }
                        },
                        //this.$slots.default, // 子组件中的阵列
                        [
                            this.$slots.cas,
                            createElement('div', {
                                style: {
                                    color: '#f4f4f4',
                                }
                            },'子div标签')
                        ]
                    )
                },props: {
                    level: {
                        type: Number,
                        required:true
                    }
                }
            },
            castingh:{
                props:['castingtem'],
                template: "<div>" +
                "<slot name='red2'><p>红色空</p></slot>" +
                "<span>8585338</span>" +
                "<slot name='blue2'><p>蓝色空</p></slot>" +
                "</div>"
            }
        },
        props: {
            level: {
                type: Number,
                required: true
            }
        },
        data: {
            page: {
                pageNum: 1,
                pageSize: 10
            },
            //castingTem:"castingHhhhhhhhh",
            infos: [],
            a:'大大',
            chi:true
        },
        created:function(){
            this.setInfo();
        },
        filters: {
            getParseDate: function(date){
                if (date && date != '') {
                    return date.substring(0,10);
                }
                return '';
            }
        },
//        render: function (createElement) {
//            return createElement('h1', this.blogTitle)
//        },
        computed:{

        },
        watch:{

        },
        methods: {
            setInfo: function () {
                var that = this;
                $.ajax({
                    url: 'https://www.doyiter.com/casting/v1/movie/getAll', //仅为示例，并非真实的接口地址
                    success: function (res) {
                        var infos = [];
                        for (var i = 0; i < res.infos.length; i++) {

                            //剧照为空
                            var pic = res.infos[i].pic;

                            if (!pic || pic == "" || pic == "null") {
                                if (res.infos[i].type == "网络大电影") {
                                    pic = "https://ohwflolko.qnssl.com/1497251763619";//网络大电影
                                }
                                else if (res.infos[i].type == "院线电影") {
                                    pic = "https://ohwflolko.qnssl.com/1497249413395";//院线电影
                                }
                                else if (res.infos[i].type == "电视剧") {
                                    pic = "https://ohwflolko.qnssl.com/1497249413395";//电视剧
                                }
                                else { //其他
                                    pic = "..//info/jz_pic.png";
                                }
                            }
                            //时间转换
                            var startTime = res.infos[i].startTime;

                            var info = {
                                "directorName": res.infos[i].directorName,
                                "pic": pic,
                                "startTime": startTime,
                                "title": res.infos[i].title,
                                "roleSize": res.infos[i].roles.length,
                                "type": res.infos[i].type
                            };
                            that.infos.push(info)
                            if( i> 0){return;};
                        }
                        console.log(infos);
                        //that.infos=infos;
                        //修过页码
                        that.page = {"pageNum": that.page.pageNum + 1, "pageSize": that.page.pageSize};
                        console.dir(that.page);
                    }
                })
            }
        }
    })
//
//
//    Vue.component('castingH', {
//        render: function (createElement) {
//            return createElement(
//                'h' + this.level,   // tag name 标签名称
//                {"color":red},
//                this.$slots.default // 子组件中的阵列
//            )
//        },
//        props: {
//            level: {
//                type: Number,
//                required: true
//            }
//        }
//    })
//    Vue.component('anchored-heading', {
//        render: function (createElement) {
//            return createElement(
//                'h' + this.level,   // tag name 标签名称
//                {
//                    style:{
//                        color:'red',
//                    }
//
//                },
//                //this.$slots.default, // 子组件中的阵列
//                [
//                    createElement('div','子div标签')
//                ]
//            )
//        },
//        props: {
//            level: {
//                type: Number,
//                required: true
//            }
//        }
//    })
//    Vue.components{
//        {
//            'anchored-heading':{
//            render: function (createElement) {
//                return createElement(
//                    'h' + this.level,   // tag name 标签名称
//                    {
//                        style: {
//                            color: 'red',
//                        }
//
//                    },
//                    //this.$slots.default, // 子组件中的阵列
//                    [
//                        createElement('div', '子div标签')
//                    ]
//                )
//            },props: {
//                level: {
//                    type: Number,
//                        required:true
//                }
//            }
//        },
//            'castingH':{
//                template: '<span>{{ message }}</span>'
//          }
//        }
//    }};
</script>
</body>
</html>